<template>
    <div class="bg-white rounded-xl p-6 shadow-md">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-xl font-bold text-gray-800">待评分作品列表</h2>
        <el-select 
          v-model="contestId" 
          placeholder="请选择竞赛"
          @change="fetchWorksList"
          class="w-64"
        >
          <el-option
            v-for="contest in contests"
            :key="contest.id"
            :label="contest.name"
            :value="contest.id"
          />
        </el-select>
      </div>
      
      <el-table
        :data="worksList"
        stripe
        border
        fit
        highlight-current-row
        @row-click="handleRowClick"
        class="mb-6"
      >
        <el-table-column prop="teamName" label="团队名称" width="150" />
        <el-table-column prop="topic" label="选题" width="100" />
        <el-table-column prop="thesisName" label="论文名称" />
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.statusType">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small"
              @click="handlePreviewScore(scope.row)"
            >
              评分
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  
  const router = useRouter()
  const contests = ref([
    { id: 'c123', name: '2025年数学建模校赛初赛' },
    { id: 'c456', name: '2025年数学建模校赛复赛' }
  ])
  const contestId = ref('c123')
  const worksList = ref([])
  const currentPage = ref(1)
  const pageSize = ref(5)
  const total = ref(0)
  const loading = ref(false)
  
  // 模拟作品数据
  const mockWorksData = [
    {
      workId: 'w789',
      teamId: 't456',
      teamName: '科创小队',
      topic: 'A',
      thesisName: 'A_张三_李四_王五_t456.pdf',
      submitTime: '2025-07-10 15:30:22',
      status: '待评分',
      statusType: 'warning'
    },
    {
      workId: 'w790',
      teamId: 't457',
      teamName: '数学建模小组',
      topic: 'B',
      thesisName: 'B_赵六_钱七_t457.pdf',
      submitTime: '2025-07-11 09:15:47',
      status: '待评分',
      statusType: 'warning'
    },
    {
      workId: 'w791',
      teamId: 't458',
      teamName: '数据分析队',
      topic: 'C',
      thesisName: 'C_孙八_周九_吴十_郑十一_t458.pdf',
      submitTime: '2025-07-12 14:22:19',
      status: '待评分',
      statusType: 'warning'
    },
    {
      workId: 'w792',
      teamId: 't459',
      teamName: '算法精英',
      topic: 'A',
      thesisName: 'A_王十二_冯十三_t459.pdf',
      submitTime: '2025-07-13 10:45:33',
      status: '已评分',
      statusType: 'success'
    },
    {
      workId: 'w793',
      teamId: 't460',
      teamName: 'AI探索者',
      topic: 'B',
      thesisName: 'B_陈十四_褚十五_卫十六_t460.pdf',
      submitTime: '2025-07-14 16:08:51',
      status: '待评分',
      statusType: 'warning'
    },
    {
      workId: 'w794',
      teamId: 't461',
      teamName: '数学创新队',
      topic: 'C',
      thesisName: 'C_蒋十七_沈十八_韩十九_t461.pdf',
      submitTime: '2025-07-15 11:20:16',
      status: '待评分',
      statusType: 'warning'
    }
  ]
  
  // 获取作品列表
  const fetchWorksList = async () => {
    if (!contestId.value) {
      ElMessage.warning('请选择竞赛')
      return
    }
    
    loading.value = true
    
    try {
      // 模拟API请求延迟
      setTimeout(() => {
        // 根据不同竞赛ID返回不同数据
        let data = [...mockWorksData]
        
        // 模拟复赛数据
        if (contestId.value === 'c456') {
          data = data.filter(item => item.workId >= 'w792')
          data.forEach(item => {
            item.status = item.workId === 'w792' ? '已评分' : '待评分'
            item.statusType = item.workId === 'w792' ? 'success' : 'warning'
          })
        }
        
        // 分页处理
        const start = (currentPage.value - 1) * pageSize.value
        const end = start + pageSize.value
        worksList.value = data.slice(start, end)
        total.value = data.length
        
        ElMessage.success('获取作品列表成功')
        loading.value = false
      }, 800)
    } catch (error) {
      console.error('获取作品列表出错:', error)
      ElMessage.error('网络错误，请稍后重试')
      loading.value = false
    }
  }
  
  // 分页相关方法
  const handleSizeChange = (newSize) => {
    pageSize.value = newSize
    fetchWorksList()
  }
  
  const handleCurrentChange = (newPage) => {
    currentPage.value = newPage
    fetchWorksList()
  }
  
  // 跳转到评分页面
  const handlePreviewScore = (row) => {
    router.push({
      name: 'PreviewScore',
      params: { workId: row.workId }
    })
  }
  
  // 点击行跳转
  const handleRowClick = (row) => {
    handlePreviewScore(row)
  }
  
  // 生命周期钩子
  onMounted(() => {
    fetchWorksList()
  })
  </script>